<template>
	<view class="content">
		<downloadPop  :file_path="file_path"></downloadPop>
		<view class="section-0">
			<view class="section-body">
				<view class="progress">
					<view class="top">
						<view class="uni-margin-wrap">
							<swiper class="swiper"  circular :indicator-dots="indicatorDots" :autoplay="autoplay"
								:interval="interval" :duration="duration">
								<swiper-item v-for="(item ,index) in imags" :key='item.id'>
									<image @tap="clickImage(index)" class="img" :src="item.path" mode="" />
								</swiper-item>
							</swiper>
						</view>
					</view>
					<view class="center">
						<view class="centerTop">
							<view>序号</view>
							<view>资料名称</view>
							<view>下载</view>
						</view>
						<view class="centerButton" v-for="(item,index) in list" :key='item.id'>
							<view class="viewId">{{item.id}}</view>
							<view class="centerButtonName">{{item.name}}</view>
							<view class="viewImage" @click="handleDownLoad(item.path)">
								<image class="image" src="../../../static/download.png" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import downloadPop from '@/components/download_pop/index.vue';
	export default {
		components: { downloadPop },
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				file_path: '',
				imags: [{
					id: 1,
					path: '../../../static/one.png'
				}, {
					id: 2,
					path: '../../../static/two.png'
				}, {
					id: 3,
					path: '../../../static/there.png'
				}],
				list:
				[{
					id: 1,
					name: '苏电党〔2020〕38号　中共国网江苏省电力有限公司委员会关于印发深入开展“ 党建 + ”工程推动党建与业务工作深度融合的实施方案的通知',
					path:'http://58.213.29.99:9096/storage/upload/20220606/63ebd6ed5f14de40cd752553cb591160.pdf'
				},{
					id: 2,
					name: '苏电咨询党〔2020〕11号　中共国网江苏省电力工程咨询有限公司委员会关于印发国网江苏省电力工程咨询有限公司“党建+基建”再提升工程实施方案的通知(1)',
					path:'http://58.213.29.99:9096/storage/upload/20220606/95b92cc8a946f2100f50b74c51bbbded.pdf'
				},{
					id: 3,
					name: '重点岗位廉洁手册（办公室、财务资产、组织人资、运维检修、营销、工程建设领域）_page_39_合并_9312',
					path:'http://58.213.29.99:9096/storage/upload/20220606/30556de530f823986b4ac5648cbc7d16.pdf'
				}]
			}
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			handleDownLoad(url) {
				this.file_path = '';
				setTimeout(() => {
					this.file_path = url;
				}, 0);
			},
			clickImage(idx){
				let a=[]
				for(let item in this.imags){
					a.push(this.imags[item].path)
				}
				//预览图片
				uni.previewImage({
					current: idx,
					urls:a,
					indicator: 'number',
					loop: true,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
	}

	.section-0 {
		width: 100%;
		background-color: #2e5efe;

		.section-body {
			width: 100%;
			padding-top: 40rpx;
			padding-bottom: 50rpx;
			background-color: #FFFFFF;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			box-sizing: border-box;

			.progress {
				width: 100%;

				.top {
					width: 100%;
					padding-top: 10rpx;

					.uni-margin-wrap {
						width: 690rpx;
						width: 100%;

						.swiper {
							height: 400rpx;

							.img {
								height: 400rpx;
								width: 100%;
							}
						}
					}

				}

				.center {
					margin-top: 30rpx;

					.centerTop {
						display: flex;
						justify-content: space-around;
						view {
							color: #3B3C40;
							margin-bottom: 30rpx;
							font-weight: 700;
						}
					}

					.centerButton {
						display: flex;
						justify-content: space-around;
						border-top: 2rpx solid #D8E4F2;
						padding: 30rpx;
						height: 200rpx;
						.centerButtonName{
							width: 400rpx;
							overflow-x: hidden;
							text-overflow:ellipsis
						}
						.viewId{
							line-height: 200rpx;
						}
						.viewImage{
							line-height: 200rpx;
						}
						.image{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
</style>
